<template>
   <div class="btn-select-item">
      <div
        class="ele-select-btn iconfont eletianjia"
        @click="addClick"
      ></div>
      <transition name="count">
      <div class="select-count" v-if="model!=0">
          <span>{{model}}</span>
      </div>
      </transition>
      <transition name="close">
        <div
          class="ele-jian-btn iconfont elejian"
          @click="reduceClick"
          v-if="model!=0"
        ></div>
      </transition>
    </div>
</template>

<script>
export default {
    props:{
        count:Number,
    },
    methods:{
        // 减少
        reduceClick(){
           this.model -=1
        },
        // 添加
        addClick(){
            this.model+=1
        }
    },
    computed:{
        model:{
            get(){
                return this.count
            },
            set(V){
                this.$emit("countChange",V)
            }
        }
    }
}
</script>

<style scoped>
.btn-select-item {
  position: absolute;
  right: 0;
  bottom: 25%;
}
.ele-select-btn {
  display: inline-block;
  bottom: 18px;
  height: 24px;
  width: 24px;
  font-size: 24px;
  color: white;
  border-radius: 50%;
  text-align: center;
  background-color: #00a0dc;
}
.ele-jian-btn {
  width: 24px;
  font-size: 24px;
  height: 24px;
  line-height: 24px;
  color: #00a0dc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #00a0dc;
  background-color: white;
  position: absolute;
  bottom: 0;
  right: 48px;
}
.select-count{
    position: absolute;
    bottom: 0;
    right: 24px;
    width: 24px;
    height: 24px;
    font-size: 10px;
    line-height: 24px;
    color: rgb(147, 153, 159);
    text-align: center;
}
.close-enter-active,
.close-leave-active {
  transition: all 0.4s linear;
}
.close-enter,
.close-leave-to {
  transform: translateX(30px) rotate(360deg);
  opacity: 0;
}

.count-enter-active,
.count-leave-active {
  transition: all 0.2s linear;
}
.count-enter,
.count-leave-to {
  opacity: 0;
}
</style>